<template>
  <div class="compatible-wrap">
    <div class="form-box table-box form-wrap">
      <el-form class="detail-wrap" label-width="100px">
        <div class="form-title">角色信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称：">{{ formData.name }}</el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="排序：">5</el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="状态：">{{ formData.status }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">{{ formData.remark }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form class="add-wrap custom-tabs" label-width="100px">
        <div class="form-title">权限配置</div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="web" name="web">

            <el-tree
                style="max-width: 600px"
                :data="pcTree"
                ref="treeWebRef"
                show-checkbox
                highlight-current
                node-key="key"
                :check-on-click-node="false"
                :expand-on-click-node="false"
                :check-on-click-leaf="false"
                :props="{ label: 'title', value: 'key' }"
            />
          </el-tab-pane>
          <el-tab-pane label="app" name="app">

            <el-tree
                style="max-width: 600px"
                :data="appTree"
                ref="treeWebRef"
                show-checkbox
                highlight-current
                node-key="key"
                :check-on-click-node="false"
                :expand-on-click-node="false"
                :check-on-click-leaf="false"
                :props="{ label: 'title', value: 'key' }"
            />
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <div class="form-btn">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import menuTree from "@/views/roleManagement/components/menuTree";
const route = useRoute();
const disabled = ref(false);
const activeName = ref('web')
const pcTree = ref([])
const appTree = ref([])
const formData = ref({
  workNumber: "",
  name: "",
  userId: "",
  userName: "",
  cardNumber: "",
  gender: "",
  mobile: "",
  departmentName: "",
  roleName: "",
  state: "",
  carType: "",
  certificateNumber: "",
  firstTime: "",
  startTimeEnd: [],
});

onMounted(async () => {
  let { id } = route.query;
  if (id) {
  }
  pcTree.value =  menuTree.pcshuju
  appTree.value = menuTree.appShuJu
  console.log(pcTree, '=============================================')
});

const formDataRef = ref();
const onSubmit = () => {
  formDataRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...formData.value,
        startTime: formData.value.startTimeEnd[0],
        endTime: formData.value.startTimeEnd[1],
      };

    }
  });
};

const onClose = () => {
  closeDialog(true);
};
</script>

<style scoped lang="scss">

</style>
